<template>
  <div class="index">
    <LoginTop />
    <div class="login-m">
      <div class="hm-bd cur-direction-column">
        <div class="login-tip"><img src="../../assets/login-tip.png"></div>
        <div class="login-con">
          <div class="login-c-lf">
            <div class="login-c-log"><img src="../../assets/dlk-logo.png"></div>
            <div class="login-c-ecode"><img src="../../assets/login-ecode.png"></div>
            <div class="login-c-tip">
              <span>关注微信公众号</span>
              <p> 获取更多精彩资讯</p>
            </div>
          </div>
          <div class="login-c-rg">
            <div class="login-c-rg-top" id="login-change">
              <span class="login-c-se" @click="globalThis.loginChange('login-phone','login-email')">普通登录</span>
              <span @click="globalThis.loginChange('login-email','login-phone')">动态码登录</span>
            </div>
            <!-- 普通登录 -->
            <div class="login-phone" id="login-phone">
              <div class="login-p-num">
                <i>账号：</i>
                <input v-model="userAccount" placeholder="手机号/邮箱" id="ptuser" autocomplete="off">
                <p>请输入手机号/邮箱</p>
              </div>
              <div class="login-p-num">
                <i>密码：</i>
                <input v-model="password" placeholder="密码" type="password" id="ptpassword" autocomplete="off">
                <p>请输入密码</p>
              </div>
              <button @click="login()" class="login-button" id="ptlogin">登录</button>
            </div>
            <!-- 动态码登录 -->
            <div class="login-email" style="display: none" id="login-email">
              <div class="login-p-num">
                <i>手机号：</i>
                <input v-model="phone" placeholder="请输入手机号" id="dtuser" autocomplete="off">
                <p>请输入手机号</p>
              </div>
              <div class="login-p-yzm login-dtdl">
                <span>
                  <i>动态密码：</i>
                  <input v-model="code" placeholder="请输入动态密码" type="password" id="dtpassword" autocomplete="off">
                  <p>请输入动态密码</p>
                </span>
                <button @click="getDynamicCode()" id="dtgetpass">免费获取动态码</button>
                <button class="buttonHide" id="dtgetpassNo">
                  <i>60</i>秒后重新获取</button>
                <!-- <button class="buttonHide" id="dtgetpassNew">重新获取</button> -->
              </div>
              <button @click="loginByCode()" class="login-button" id="dtlogin">登录</button>
            </div>
            <div class="login-bottom">
              <span class="login-b-lf">
                <input v-model="remember" type="checkbox">
                <span>记住账号</span>
              </span>
              <span class="login-b-rg fr">
                <span>
                  <a href="javascript:void(0)" @click="$router.push('/register')">免费注册</a><img src="../../assets/login-b-line.png">
                  <a href="javascript:void(0)" @click="$router.push('/passwordFind')">忘记密码</a>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import $ from 'jquery'
import LoginTop from '@/components/login-top'
import Footer from '@/components/footer'
import CryptoJS from 'crypto-js'
import * as api from '@/service/api'
import cookie from '@/utils/cookie'
export default {
  title: '用户中心-登录',
  components: {
    LoginTop,
    Footer
  },
  data () {
    return {
      globalThis: null,
      phone: null,
      code: null,
      timer: '',
      userAccount: null,
      password: null,
      remember: true,
      loading: false
    }
  },
  created () {
    if (localStorage.getItem('userAccount')) {
      this.userAccount = localStorage.getItem('userAccount')
    }
  },
  computed: {
    // 来源网址
    url () {
      return this.$route.query.url || ''
    },
    curRoute () {
      return this.$route.path
    }
  },
  mounted () {
    let lis = $('#login-change span')
    $(lis).click(function () {
      $(lis).removeClass('login-c-se')
      $(this).addClass('login-c-se')
    })
    this.globalThis = window
    // this.globalThis.loginVerify() // 登录验证
  },
  methods: {
    async login () {
      try {
        if (this.userAccount && this.password) {
          let key = CryptoJS.enc.Base64.parse('MDEyMzQ1Njc4OUFCQ0RFRg==')
          let iv = CryptoJS.enc.Base64.parse('MDEyMzQ1Njc4OUFCQ0RFRg==')
          let encrypted = CryptoJS.AES.encrypt(this.password, key, {
            iv: iv,
            padding: CryptoJS.pad.Pkcs7,
            mode: CryptoJS.mode.CBC
          })
          let oldPassword = CryptoJS.enc.Utf8.parse(encrypted.ciphertext.toString())
          let base64Password = CryptoJS.enc.Base64.stringify(oldPassword)

          let res = await api.login({
            phone: this.userAccount,
            password: base64Password
          })
          if (this.remember) {
            localStorage.setItem('userAccount', this.userAccount)
          } else {
            localStorage.removeItem('userAccount')
          }
          this.loginNext(res.data.accessToken.value)
        }
      } catch (err) {
        console.log(err)
      }
    },
    async loginByCode () {
      try {
        if (this.phone && this.code) {
          let res = await api.loginByCode({
            phone: this.phone,
            code: this.code
          })
          this.loginNext(res.data.accessToken.accessToken)
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getDynamicCode () {
      if (!/^0?1[3-8][0-9]\d{8}$/.test($('#dtuser').val())) {
        window.layer.msg('请输入正确手机号！', {
          icon: 2
        })
      }
      window.clearInterval(this.timer)
      try {
        await api.getDynamicCode({
          phone: this.phone
        })

        window.layer.msg('动态密码已发送至手机，请注意查收！', {
          icon: 1
        })
        let time = 59
        $('#dtgetpassNo').find('i').text(time)
        $('#dtgetpassNo').show()
        $('#dtgetpass').hide()
        this.timer = setInterval(function () {
          $('#dtgetpassNo').find('i').text(time)
          time--
        }, 1000)
        setTimeout(function () {
          $('#dtgetpassNo').hide()
          $('#dtgetpass').show()
          window.clearInterval(this.timer)
        }, 60000)
      } catch (err) {
        console.log(err)
        window.clearInterval(this.timer)
      }
    },
    loginNext (token) {
      cookie.set('device_id', token)
      sessionStorage.setItem('token', token)
      if (this.url) {
        window.location.href = this.url
      } else {
        this.$store.dispatch('getUserInfo')
        this.$router.push('/plan')
      }
    }
  }
}
</script>
<style lang="scss">
</style>
